<!DOCTYPE html>
<html lang="en" style="height:100%;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>金币</title>

    <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/yzl.css"/>

</head>
  <style media="screen">
    body{
      background-color: #fff;
    }
    .coin-echarge{
      padding-left: 2%;
    }
    .pay-title{
      font-size: 16px!important;
    }
    .pay-total{
      font-size: 20px;
    }

  </style>
<body style="height:100%;">
<div id="blank" class="header" v-cloak>
    <div v-back.tapmode class="back"></div>
    <span class="title">购买金币</span>
</div>
<div id="app" class="container"  style="padding-top:60px;">
  <div class="coin-echarge">

    <div class="coin-container" style="background:#FFEAE9;" :class="{'select-active1':select_state==1}" v-myclick="[1,select]">
      <img src="../../image/01_jb.png">
    </div>
    <div class="coin-container" :class="{'select-active2':select_state==2}" v-myclick="[2,select]" style="background:#E3EDFF;">
      <img src="../../image/02_jb.png">
    </div>
    <div class="coin-container" style="background:#EDE4FF;" :class="{'select-active3':select_state==3}" v-myclick="[3,select]">
      <img src="../../image/03_jb.png">
    </div>
    <div class="coin-container" style="background:#E3FFEF;" :class="{'select-active4':select_state==4}" v-myclick="[4,select]">
      <img src="../../image/04_jb.png">
    </div>
    <div class="coin-container" style="background:#ffe4f2;" :class="{'select-active5':select_state==5}" v-myclick="[5,select]">
      <img src="../../image/05_jb.png">
    </div>
    <div class="coin-container" style="background:#fdffe4;" :class="{'select-active6':select_state==6}" v-myclick="[6,select]">
      <img src="../../image/06_jb.png">
    </div>

  </div>
  <!-- <div class="custom-container">
    <div class="custom-line">
    <div class="custom-header"><img v-src="'../../image/3_jinbi2.png'"><span>自定义</span></div>
    <input class="input" type="number" v-model="num"><span style="margin-left:10px">金币</span>
  </div>
  </div> -->
  <div class="pay_container" style="margin-top:10%;">
    <div class="pay-title">待支付</div>
    <div class="pay-total">{{total}}元</div>
    <div class="pay-button" v-myclick="pay">
      <img v-src="'../../image/weixinpay.png'">
      <span>微信支付</span>
    </div>
  </div>
</div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/vue.js"></script>
<script src="../../script/app.js"></script>
<script src="../../script/common.js"></script>
<script src="../../script/url.js"></script>

<script>
    var commission;
    var vm;
    var user;
    apiready = function () {
        setBSImg();
        new Vue({
            el: '#blank'
        });
        wx = api.require('wx');
        wxPay = api.require('wxPay');
        initApp();
        addListeners();
    };

    function initApp() {
        vm = new Vue({
            el: '#app',
            data: {
                withdrawTypes: {
                    ali: true,
                    bank: false
                },
                isFrameOpened:false,
                select_state:1,
                total:2,
                num:20
            },
            watch:{
              num: function (newVaL) {
                  this.total = newVaL/10;
              },
            },
            computed: {
            },
            methods: {
              select:function(state) {
                this.select_state = state;
                switch (state) {
                  case 1:
                    this.total = 2;
                    this.num = 20;
                    break;
                  case 2:
                    this.total = 5;
                    this.num = 50;
                    break;
                  case 3:
                    this.total = 10;
                    this.num = 100;
                    break;
                  case 4:
                    this.total = 50;
                    this.num = 500;
                    break;
                  case 5:
                    this.total = 100;
                    this.num = 1000;
                    break;
                  case 6:
                    this.total = 500;
                    this.num = 5000;
                    break;
                  default:

                }
              },
              pay: function () {
                if(this.num>500000){
                  pinet.alert('最多购买500000');
                  return;
                }
                  showProgress();
                  var data = {
                      foreign_infos:this.num+';'+this.total,
                      order_type: 1,
                      member_id: getPrefs('member_id'),
                      order_amount: this.total,
                      pay_type: 1
                  };
                  pinet.post(URL.pay, data, vm.pay_common);
              },
              pay_common:function(ret){
                this.pay_wx(ret.content);
              },
              pay_wx: function (infos) {
                wxPay.payOrder({
                    apiKey: infos.apiKey,
                    orderId: infos.prepayid,
                    mchId: infos.partnerid,
                    nonceStr: infos.noncestr,
                    timeStamp: infos.timestamp,
                    package: infos.package,
                    sign: infos.sign
                }, function (ret, err) {
                    if (ret && ret.status) {
                        api.toast({
                            msg: '支付成功',
                            duration: 2000,
                            location: 'middle'
                        });
                        api.sendEvent({
                          name : 'updatecoin',
                        });
                        api.sendEvent({
                          name : 'updateproperty',
                        });

                    } else if (err.code == -2) {

                    } else {
                        alert('支付失败,错误码:' + err.code);
                    }
                });
            },
            }
        })
    }

    function addListeners() {

        api.addEventListener({
            name: 'viewappear'
        }, function () {
            onPageStart();
        });

        api.addEventListener({
            name: 'viewdisappear'
        }, function () {
            onPageEnd();
        });

        api.addEventListener({
            name: 'keyback'
        }, function () {
            onPageEnd();
            api.closeWin();
        });
    }

</script>
</html>
